<template>
	<div>
		<nav-bar>
			<template v-slot:left>
				<img src="../../assets/images/left.png" alt="return icon">
			</template>
			<template v-slot:center>商品详情:{{ id }}</template>
		</nav-bar>
		
		<van-image
				width="100%"
				lazy-load
				:src="detail.cover_url"
		/>
		<van-card
				
				:price="detail.price + '.00'"
				:title="detail.title"
		
		>
			<template #tags>
				<van-tag plain type="danger">{{ tags[0] }}</van-tag>
				<van-tag plain type="danger">{{ tags[1] }}</van-tag>
			</template>
			<template #footer>
				<van-button size="mini" type="danger" @click="handleAddcart">加入购物车</van-button>
				<van-button size="mini" type="danger" @click="gotoCart">立即购买</van-button>
			</template>
		</van-card>
		<van-tabs v-model="active">
			<van-tab title="概述">
				<div v-html="detail.details" class="content">
				</div>
			</van-tab>
			<van-tab title="热评">
			
			</van-tab>
			<van-tab title="相关图书"></van-tab>
			<goods-item>
			
			</goods-item>
		</van-tabs>
	</div>
</template>
<!--<template>-->

<!--</template>-->
<script>
import {reactive, ref, onMounted, toRefs} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {useStore} from 'vuex'
import {getDetail} from "@/network/detail";

import NavBar from "@/components/common/navbar/NavBar";
import GoodsItem from "@/components/content/goods/goodsItem/GoodsItem";


export default {
	name: "Detail",
	components: {
		NavBar,
		GoodsItem,
	},
	setup() {
		const route = useRoute() // 创建路由
		const router = useRouter() // 创建路由
		let id = ref(3) // 产品默认id
		const store = useStore()
		// 展示信息模型
		let book = reactive({
			detail: [], // 详情
			tags: ref([]) // 保存书的标签信息
		})
		onMounted(() => {
					id.value = route.query.id // 通过路由接收id,如果为动态路由,值为route.params.id
					// 获取id对应的商品信息
					getDetail(id.value).then(res => {
						book.detail = res[0] // 从数组中取出对象
						book.tags = book.detail.description.trim().split('/') // 将标签属性截取出来作展示
					}).catch()
				}
		)
		
		// 添加购物车事件
		const handleAddcart = () => {
			// 将当前产品id保存在store.state中
			store.commit('addCart', id.value)
		}
		
		// 立即购买事件
		const gotoCart = () => {
			handleAddcart()
			router.push({path: '/shopcart'})
		}
		return {
			id,
			...toRefs(book),
			active: 2,
			gotoCart,
			handleAddcart,
		}
	}
}
</script>

<style scoped>
.van-card__pric {

}

.van-card__bottom {

}

.van-card {
	font-size: 16px;
}

.content {

}

.content > img {
	width: 400px;
}
</style>